import React, { useEffect, useRef, useState } from 'react';
import  './index.less';
import { Spin } from 'antd';
import AMapLoader from '@amap/amap-jsapi-loader';
import BaseMap from './BaseMap';

const Map: React.FC<any> = ({ onLoad, zoneCode, config, ...props }: any) => {
  const chartContainer = useRef<any>();
  const [loading, setLoading] = useState(true);
  const mapRef = useRef<any>();
  const baseMapRef = useRef<any>();
  const initAMap = () => {
    return new Promise((reslove, rejcet) => {
      if (!window.AMap) {
        AMapLoader.load({
          key: '764ec790ac9a63dce2a37502099e24bb', // 申请好的Web端开发者Key，首次调用 load 时必填
          // secretKey:'7f2642cc916137d4c5de671d75eaf213',
          version: '1.4.15', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
          plugins: [], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
          AMapUI: {
            // 是否加载 AMapUI，缺省不加载
            version: '1.1', // AMapUI 缺省 1.1
            plugins: ['geo/DistrictExplorer'], // 需要加载的 AMapUI ui插件
          },
          Loca: {
            // 是否加载 Loca， 缺省不加载
            version: '1.3.2', // Loca 版本，缺省 1.3.2
          },
        })
          .then((AMap) => {
            reslove(AMap);
          })
          .catch((e) => {
            rejcet(e);
          });
      } else {
        reslove(window.AMap);
      }
    });
  };
  const initMapInstance = () => {
    return new Promise((reslove, rejcet) => {
      if (!mapRef.current) {
        mapRef.current = new window.AMap.Map(chartContainer.current, {
          viewMode: '3D',
          // zoom: props.area?.zoom || 8.42,
          center: [112.944936, 28.182195],
          mapStyle: 'amap://styles/bb6c2dcf6fa862552761fb63cce0e7d4',
          dragEnable: true,
          zoomEnable: true,
          rotateEnable: false,
          animateEnable: false,
        });
        mapRef.current.on('complete', () => {
          reslove(mapRef.current);
        });
      }
      // mapInstance.current.setZoom(props.area?.zoom);
      // mapInstance.current.setCenter(props.area?.center);
    });
  };
  const initBaseMap = () => {
    return new Promise((resolve, reject) => {
      const instance = new BaseMap({
        map: mapRef.current,
        keywords: 430100,
        event: {
          featureMousemove(e: any, a: any) {
            // console.log(e,a)
          },
          destory: () => {
            // this.mapInstance && (this.mapInstance = null);
          },
        },
        hover: {
          enable: false,
        },
        active: {
          enable: false,
        },
        mapStatus: {
          dragEnable: true,
          zoomEnable: true,
        },
        specialAreaConfigMap: {
          '430302': {
            center: [112.856541, 27.959021],
          },
        },
        success: (instance: any) => {
          onLoad && onLoad(instance);
        },
        ...config,
      });
      resolve(instance);
    });
  };
  const init = async () => {
    setLoading(true);
    // 加载AMap
    window._AMapSecurityConfig = {
      securityJsCode: '207a5bcb7f0c2cee6ed27ac210484457',
    };
    await initAMap();
    // 初始化地图
    await initMapInstance();
    // 绘制行政区域等基础元素
    baseMapRef.current = await initBaseMap();
    setLoading(false);

    baseMapRef.current.install();
  };
  useEffect(() => {
    init();
  }, []);
  return (
    <>
      <div {...props} ref={chartContainer}></div>
      {loading && (
        <div
          className={`${'map-mask'} relative  w-full h-full`}
          style={{ background: 'rgba(16 ,32, 43, 1)', zIndex: 1 }}
        ></div>
      )}
    </>
  );
};

export default Map;
